<template>
<Row class="center">
    <!-- 展商用户id：{{userId}} -->
    <Card class="mb10">
        <p slot="title">本页技术点</p>
        <Alert type="success" show-icon>
            <template slot="desc">
                <p>手写表格，点击添加一行，表单</p>
            </template>
        </Alert>
    </Card>
    <Card>

        <div slot="title" class="mb20">
            <p class="fl">
                <sapn class>表格6：参展商胸卡 申请</sapn>
                <span class="em">（截止日期：2020年1月17日）</span>
            </p>
            <div class="fr mt_25">
                <Button type="primary" class="mr10" :loading="submitLoading" @click="handleSubmit">{{ $t('btn.save') }}</Button>
                <Button type="primary" class="mr10">{{ $t('btn.reset') }}</Button>
                <Button type="primary" class @click="close">{{ $t('btn.back') }}</Button>
            </div>
        </div>
        <Row>
            <p>请在下列时间到展会现场“参展商报到处”领取参展商胸卡</p>
        </Row>
        <Row class="info">
            <table class="tableH tableH-bordered mt10 mb10">
                <tbody>
                    <tr>
                        <td rowspan="2" class="tc">参展商报到时间</td>
                        <td class="tc">2020年2月24日</td>
                        <td class="tc">09:00 ~ 17:00</td>
                    </tr>
                    <tr>
                        <td class="tc">2020年2月25日</td>
                        <td class="tc">09:00 ~ 17:00</td>
                    </tr>
                </tbody>
            </table>
        </Row>
        <Form ref="form" :model="form" :label-width="160" :rules="formValidate" inline>
            <Row>
                <p class="fb">• 每个参展企业将按照以下标准获得参展证件：</p>
                <p>9平方米，4张免费胸卡；10－18平方米，8张免费胸卡；</p>
                <p>19－27平方米，12张免费胸卡；28－36平方米，16张免费胸卡；</p>
                <p>45－54平方米，20张免费胸卡；</p>
                <p>54平方米以上，25张免费胸卡，81平方米以上，30张免费胸卡 所有额外的胸卡每张50元. </p>
                <p class="fb">• 出于安全方面的原因，主办单位只在展会现场及指定时间发放参展商胸卡.</p>
                <p class="fb">• 布展期间，任何人员必须佩戴由主办单位发放的相应胸卡或证件进入展场。请在此期间配合安保人员的检查工作，所有胸卡或证件禁止转让、借用或出售。</p>
                <p class="fb">• 如需付费（50元人民币/张）申请额外参展商胸卡，请填写下面表格（最多20张）。</p>
            </Row>
            <Row class="mtb10">
                <p @change="handleAddAuto">我公司需要申请
                    <Input v-model.trim="form.numbers" style="width:50px;margin-right:10px;" placeholder="请输入" type="number" />张额外的参展商胸卡。</p>
            </Row>
            <Row class="addRowFormBox">
                <FormItem v-for="(item, index) in formDynamic1.items" v-if="item.status" :key="index" :prop="'items.' + index + '.value'" :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}" style='display:block'>
                    <Row :gutter='16'>
                        <Col span="7">
                        <Input type="text" v-model="item.dyName" placeholder="请输入姓名"></Input>
                        </Col>
                        <Col span="7">
                        <Input type="text" v-model="item.dyPosition" placeholder="请输入职位"></Input>
                        </Col>
                    </Row>
                </FormItem>
            </Row>
            <Row class="mtb10">
                <p class="fb">• 此外，主办单位将在参展商胸卡上打印参展人员姓名及称呼，请在下表中填写这些人员的姓名及称呼。如果您不需要这些内容，胸卡的相应位置将保留空白</p>
                <p class="fb">• 以下人员信息包括展商应得胸卡人员信息以及增加胸卡人员信息数据。</p>
            </Row>
            <Row class="addRowFormBox">
                <FormItem v-for="(item, index) in formDynamic2.items" v-if="item.status" :key="index" :prop="'items.' + index" :rules="{required: true, message: 'Item ' + item.index +' 不能为空', trigger: 'blur'}" style='display:block'>
                    <Row :gutter='16'>
                        <Col span="7">
                        <Input type="text" v-model="item.dyName" placeholder="请输入姓名"></Input>
                        </Col>
                        <Col span="7">
                        <Input type="text" v-model="item.dyPosition" placeholder="请输入职位"></Input>
                        </Col>
                        <Col span="4">
                        <Button @click="handleRemove(index)">删除</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem style="display:block">
                    <Row :gutter='16'>
                        <Col span="15">
                        <Button type="dashed" @click="handleAdd" icon="md-add">添加一行</Button>
                        </Col>
                    </Row>
                </FormItem>
                <!-- <FormItem>
                    <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
                    <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
                </FormItem> -->
            </Row>
            <!-- <Row>
                <Tree :data="dataTree" show-checkbox multiple></Tree>
            </Row> -->
            <Row>
                <Divider orientation="left">填报人信息</Divider>

                <FormItem label="填报人姓名" prop="name">
                    <Input v-model.trim="form.name" autocomplete="off" :maxlength="20" style="width:300px;" placeholder="请输入" />
                </FormItem>
                <FormItem label="手机" prop="mobilePhone">
                    <Input v-model.trim="form.mobilePhone" autocomplete="off" :maxlength="11" style="width:300px;" placeholder="请输入" />
                </FormItem>
                <FormItem label="传真" prop="fax">
                    <Input v-model.trim="form.fax" autocomplete="off" :maxlength="20" style="width:300px;" placeholder="请输入" />
                </FormItem>
                <FormItem label="电子邮箱" prop="email">
                    <Input v-model.trim="form.email" autocomplete="off" :maxlength="20" style="width:300px;" placeholder="请输入" />
                </FormItem>
                <FormItem label="QQ" prop="qq">
                    <Input v-model.trim="form.qq" autocomplete="off" :maxlength="20" style="width:300px;" placeholder="请输入" />
                </FormItem>
                <FormItem label="微信号" prop="weixin">
                    <Input v-model.trim="form.weixin" autocomplete="off" :maxlength="20" style="width:300px;" placeholder="请输入" />
                </FormItem>

            </Row>
        </Form>
        <Row>
            <Alert class="mt10 mb10" type="success" show-icon>只有个人姓名及称呼，企业名称，展位号，国家将被打印在参展商胸卡上</Alert>
        </Row>

        <Row>
            <Divider orientation="left">获取更多信息，请与我们联系</Divider>
            <Col span="16">
            <div class="ml35">
                <p>联系人：祖倞</p>
                <p>电话：+86-10-84556637</p>
                <p>传真：+86-10-62358292</p>
                <p>电邮：Liang.zu@ReedSinopharm.com </p>
                <p>地址：北京市朝阳区新源南路1-3号 中国平安国际金融中心B座15层100027</p>
            </div>
            </Col>
            <Col span="8">
            <div class="fr">
                <Button type="primary" class="mr10" :loading="submitLoading" @click="handleSubmit">{{ $t('btn.save') }}</Button>
                <Button type="primary" class="mr10">{{ $t('btn.reset') }}</Button>
                <Button type="primary" class @click="close">{{ $t('btn.back') }}</Button>
            </div>
            </Col>
        </Row>
    </Card>
</Row>
</template>

<script>
import {
    constants
} from 'crypto'
export default {
    name: '',
    components: {},
    data() {
        return {
            submitLoading: false,
            // 自动添加
            formDynamic1: {
                items: []
            },
            // 手动添加
            formDynamic2: {
                items: [{
                    dyName: '',
                    dyPosition: '',
                    index: 1,
                    status: 1
                }]
            },
            userId: '',
            form: {
                name: '',
                mobilePhone: '',
                fax: '',
                email: '',
                qq: '',
                weixin: '',
                numbers: 0 // 额外申请的数量
            },
            formValidate: {
                name: [{
                    required: true,
                    message: '填表人姓名不能为空',
                    trigger: 'blur'
                }],
                mobilePhone: [{
                    required: true,
                    message: '手机不能为空',
                    trigger: 'blur'
                }],
                email: [{
                    required: true,
                    message: '邮箱不能为空',
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        init() {
            this.userId = this.$route.query.userId
            this.handleAddAuto()
        },
        // 手动添加输入框
        handleAdd() {
            this.index++
            this.formDynamic2.items.push({
                dyName: '',
                dyPosition: '',
                index: this.index,
                status: 1
            })
        },
        // 系统自动添加输入框
        handleAddAuto() {
            this.formDynamic1.items.length = 0
            for (let i = 0; i < this.form.numbers; i++) {
                this.formDynamic1.items.push({
                    dyName: '',
                    dyPosition: '',
                    index: i,
                    status: 1
                })
            }
        },
        handleRemove(index) {
            this.formDynamic2.items[index].status = 0
        },
        handleSubmit() {

        },
        close() {

        }
    },
    mounted() {
        this.init()
    },
    updated() {
        // this.handleAddAuto();
    },

}
</script>

<style lang="less">
.addRowFormBox {
    margin: 10px 0;
}

.info {
    td {
        padding: 10px !important;
    }
}
</style>
